<template>
  <div>provide && inject!</div>
  <p>当前颜色:{{ color }}</p>
  <button @click="red">红色</button>
  <button @click="green">绿色</button>
  <button @click="black">黑色</button>
  <hr>
  <Son/>
</template>

<script lang="ts">
import {defineComponent, ref, provide} from 'vue';
import Son from '@/components/son.vue'

export default defineComponent({
  name: 'App',
  components: {Son},
  setup() {
    const color = ref('red');
    provide('color', color)
    const red = () => {
      color.value = 'red'
    }
    const green = () => {
      color.value = 'green'
    }
    const black = () => {
      color.value = 'black'
    }
    return {
      color, red, green, black
    }
  }
});
</script>

<style>

</style>
